document.addEventListener('DOMContentLoaded', function() {		
		
		// nav
        const html = document.documentElement;
        html.setAttribute('data-scroll', '0');
        window.addEventListener('scroll', () => {
            const scrollY = window.scrollY;
            const progress = scrollY > 0 ? Math.min(scrollY / 100, 1) : 0;
            html.style.setProperty('--scroll-progress', progress);
            html.setAttribute('data-scroll', scrollY > 0 ? '1' : '0');
        });

		//bg1
		const gradientBg1 = document.querySelector('.bg1');
		window.addEventListener('scroll', () => {
  		const scrollTop = window.scrollY;
  		const maxScroll = window.innerHeight*0.2;
  		let opacity = scrollTop / maxScroll;
  		opacity = Math.min(opacity, 1);
  		gradientBg1.style.opacity = opacity;
		});

		//bg2
		const gradientBg2 = document.querySelector('.bg2');
		window.addEventListener('scroll', () => {
  		const scrollTop = window.scrollY;
  		const maxScroll = window.innerHeight;
  		let opacity = 1 - (scrollTop / maxScroll);
  		opacity = Math.max(opacity, 0);
  		gradientBg2.style.opacity = opacity;
		});
			
		//LOGO上移
		const fogLogo = document.querySelector('.logo');
		const maxLogoMoveDistance = 400;
		const maxOpacityScroll = 100;
		window.addEventListener('scroll', () => {
  		const scrollTop = window.scrollY;
		let moveDistance = scrollTop;
  		moveDistance = Math.min(moveDistance, maxLogoMoveDistance);
  		let opacity = 1 - (scrollTop / maxOpacityScroll);
  		opacity = Math.max(opacity, 0);
  		fogLogo.style.transform = `translateY(${-moveDistance}px)`;
  		fogLogo.style.opacity = opacity;
		});
	
		//logo_label下移
		const Logolabel = document.querySelector('.logo_label');
		const maxLabelMoveDistance = 100;
		window.addEventListener('scroll', () => {
  		const scrollTop = window.scrollY;
  		let moveDistance = scrollTop;
  		moveDistance = Math.min(moveDistance, maxLabelMoveDistance);
  		Logolabel.style.transform = `translateY(${moveDistance}px)`;
		});
		
		
		//Section2
		const section2 = document.querySelector('.section2');
		const section2StartY = -300; 
		const section2MaxMove = 300; 
		const section2ScrollRange = window.innerHeight * 0.8;
		const maxGap = 100; 
		window.addEventListener('scroll', () => {
    	const scrollTop = window.scrollY;
    	let moveDistance = (scrollTop / section2ScrollRange) * section2MaxMove;
    	moveDistance = Math.min(moveDistance, section2MaxMove);
    	const gap = (scrollTop / section2ScrollRange) * maxGap;
    	const currentGap = Math.min(gap, maxGap); 
    	section2.style.transform = `translateY(${section2StartY + moveDistance}px)`;
    	section2.style.gap = `${currentGap}px`;
		});
		
		
		

  		const drops = document.querySelectorAll('.water-drop');
  		const fullMoveScroll = 500; 
  		const targetPositions = [
    		{ left: 15, top: 20, rotate: '-3deg' }, 
    		{ left: 75, top: 25, rotate: '2deg' },   
    		{ left: 60, top: 45, rotate: '-1deg' },  
    		{ left: 70, top: 18, rotate: '4deg' },   
    		{ left: 30, top: 0, rotate: '-2deg' }   ];


  		drops.forEach((drop, index) => {
    		const target = targetPositions[index];
    		drop.style.left = '50%'; 
    		drop.style.top = '50%';  
    		drop.style.opacity = '0';
    		drop.style.transform = `rotate(${target.rotate})`;
  		});
  		window.addEventListener('scroll', () => {
    		const scrollTop = window.scrollY;
    		const progress = Math.max(0, Math.min(1, scrollTop / fullMoveScroll));
    		drops.forEach((drop, index) => {
      		const target = targetPositions[index];
      		const currentLeft = 50 + (target.left - 50) * progress; 
      		const currentTop = 50 + (target.top - 50) * progress;   
      		drop.style.left = `${currentLeft}%`;
      		drop.style.top = `${currentTop}%`;
      		drop.style.opacity = progress;
    		});
  		});
  		setTimeout(() => {
    	window.dispatchEvent(new Event('scroll'));
  		}, 0);
  
  
});